<template>
    <div class="comment-parent">
        <div class="comment-avatar">
            <!--            用户头像-->
            <el-avatar class="send-avatar" style="cursor: pointer" size="medium"
                       :src="commentParent.fromUser.avatar"></el-avatar>
        </div>
        <div class="comment-content">
            <!--            评论人信息-->
            <div class="comment-who">
                <span class="from-username username">{{commentParent.fromUser.username}}:</span>
                <div>
                    <span class="answer" @click="isShow = !isShow">回复</span>
                    <span class="time">{{commentParent.createTime | format('YYYY-MM-DD HH:mm')}}</span>
                </div>
            </div>

            <!--            回复表单-->
            <div class="answer-input" v-if="isShow">
                <el-input
                        class="send-content"
                        maxlength="255"
                        minlength="1"
                        show-word-limit
                        autosize
                        resize="none"
                        type="textarea"
                        :placeholder="'回复 '+commentParent.fromUser.username"
                        v-model="textarea">
                </el-input>
                <div class="answer-input-btn">
                    <el-button size="small" type="success" @click="sendComment">提交评论</el-button>
                </div>
            </div>


            <!--            评论内容-->
            <div class="content">
                <p>{{commentParent.content}}</p>
            </div>

            <!--            子评论-->
            <CommentChild
                    @sendComment="receive"
                    v-for="(item,index)  in commentParent.children" :key="index"
                    :commentChild="item"/>

            <div v-if="commentParent.children.length > num-1">
                <div v-if="flag" class="moment-more" @click="loadAll">加载全部</div>
                <div v-else class="moment-more" @click="loadAll">收起评论</div>
            </div>
        </div>
    </div>
</template>

<script>
    import CommentChild from "./CommentChild";

    import {sendComment} from "@/api/business/comment"

    export default {
        name: 'CommentParent',
        data() {
            return {
                textarea: "",
                isShow: false,
                flag: true,
                otherChildren: [],
                num: 2
            };
        },
        props: {
            commentParent: {
                type: Object,
                required: true
            }
        },
        methods: {
            /**
             * 监听子组件发送过来的事件
             */
            receive(comment) {
                this.commentParent.children.push(comment)
            },
            /**
             * 加载所有评论
             */
            loadAll() {
                if (this.flag) {
                    this.flag = false
                    this.commentParent.children.push(...this.otherChildren)
                } else {
                    this.flag = true
                    let length = this.commentParent.children.length;
                    this.commentParent.children.splice(this.num, length)
                }
            },
            /**
             * 发表评论
             */
            sendComment() {
                if (!this.isLogin()) {
                    this.msgError("请登录之后再评论")
                    return
                }
                if (this.textarea.trim() === "") {
                    this.msgWarn("请输入有效评论")
                    return
                }
                let params = {
                    toUser: this.commentParent.fromUser.userId,
                    type: this.commentParent.type,
                    typeId: this.commentParent.typeId,
                    content: this.textarea,
                    level: 2,
                    parentId: this.commentParent.commentId
                }
                sendComment(params).then(res => {
                    this.commentParent.children.push(res.data)
                    this.textarea = ""
                    this.msgSuccess("发表成功")
                })
            }
        },
        mounted() {
            if (this.commentParent) {
                let length = this.commentParent.children.length;
                if (length > this.num) {
                    this.otherChildren = this.commentParent.children.splice(this.num, length)
                }

            }
        },
        components: {
            CommentChild
        }
    }
</script>

<style scoped lang='less'>
    .comment-parent {
        width: 100%;
        display: flex;
        padding-bottom: 20px;
        margin-bottom: 20px;
        border-bottom: 1px solid #EBEEF5;


        .comment-avatar {
            margin-right: 10px;
        }

        .comment-content {
            flex: 1;

            .moment-more:hover {
                color: #E6A23C;
            }

            .moment-more {
                cursor: pointer;
                height: 30px;
                font-size: 13px;
                text-align: center;
                line-height: 30px;
                background-color: #F2F6FC;
                color: #606266;
            }


            .answer-input {
                margin: 10px 0;

                .answer-input-btn {
                    text-align: right;
                    margin-top: 10px;
                }
            }

            .content {
                font-size: 13px;
                color: #909399;
                margin-bottom: 15px;
                line-height: 20px;

                > p {
                    word-wrap: break-word;
                    word-wrap: break-word;
                    word-break: break-all;
                    overflow: hidden;
                }
            }

            .comment-who {
                display: flex;
                justify-content: space-between;
                height: 25px;
                align-items: center;

                .username {
                    font-size: 16px;
                    font-weight: 700;
                    color: #67C23A;
                    cursor: pointer;
                }


                .time {
                    font-size: 12px;
                    color: #909399;
                    margin-left: 20px;
                }

                .answer:hover {
                    color: #67C23A;
                }

                .answer {
                    font-size: 12px;
                    color: #909399;
                    cursor: pointer;
                }
            }
        }
    }
</style>